<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="ISO-8859-1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>SpreadShout - Admin</title>

        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/back-bkup.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    </head>
    <body>

        <!-- NAVIGATION -->
        <aside class="sidebar-offcanvas">
            <nav>
                <a class="logo" href="#">
                    <img src="img/logo-txt-wh.png" alt="Spread Shout">
                </a>
                <hr />
                <div class="views">
                    <a href="#"><i class="fa fa-bullhorn"></i>Shouts</a>
                    <a href="#"><i class="fa fa-users"></i>Spreaders<i class="Spreaders fa fa-caret-down"></i></a>
                    <a href="#"><i class="fa fa-bar-chart-o"></i>Statistics</a>
                </div>
                <hr>
                <div class="views">
                    <a href="#"><i class="fa fa-comment"></i>My Supports</a>
                </div>
                <hr />
                <!-- <div class="actions">
                    <span class="red">220</span>
                    <p><b>Spreaders</b> let you post<br />
                        on their behalf</p>
                    <button><i class="fa fa-user"></i>Recruit</button>
                </div>
                <hr />
                <div class="actions">
                    <span class="blue">66,000</span>
                    <p>is your total <b>reach</b></p>
                    <button><i class="fa fa-plus"></i>Create a Shout</button>
                </div> -->
                <div class="footer-links">
                    <ul>
                        <li><a  href="#">FAQ</a></li>
                        <li><a  href="#">About us</a></li>
                        <li><a  href="#">Blog</a></li>
                    </ul>
                    <p>Language <a class="red" href="#">en</a>|<a class="red" href="#">es</a></p>
                </div>
                <div class="contact">
                    <p>Got any questions?<br /> 
                        Feel free to <a class="red" href="mailto:hi@spreadshout.com">Contact Us</a></p>
                    <p>&reg; 2014 SpreadShout.<br />
                        All rights reserved</p>
                </div>
            </nav>
        </aside>
        <!-- NAVIGATION -->

        <!-- WHITE BLOCK -->
        <div class="main-content">

            <!-- USER -->
            <header>
                <div class="open-sidebar left"><i class="fa fa-bars"></i></div>
                <div class="user dropdown left">
                    <a class="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
                        <div class="current">
                            <img src="img/face.png" alt="" /><span>Greenpeace</span><i class="fa fa-angle-down"></i>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><img class="left" src="img/face.png" alt="" /><i class="fa fa-pencil right"></i><div class="name">Greenpeace</div></li>
                        <li><img class="left" src="img/face.png" alt="" /><i class="fa fa-pencil right"></i><div class="name">Greenpeace</div></li>
                        <li><img class="left" src="img/face.png" alt="" /><i class="fa fa-pencil right"></i><div class="name">Greenpeace</div></li>
                    </ul>
                </div>
                <div class="url left">
                    <a href="#"><span>spreadshout.com/greenpeace</span><i class="fa fa-link"></i><i class="fa fa-long-arrow-right"></i></a>
                </div>
                <div class="settings right dropdown right">
                    <span class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                        <div class="current hidden-xs">
                            <i class="fa fa-user"></i><span>Juan Perez</span><!--
                            --><i class="fa fa-caret-down"></i>
                        </div>
                        <div class="current visible-xs">
                            <i class="fa fa-user"></i><!--
                            --><i class="fa fa-caret-down"></i>
                        </div>
                    </span>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="#">Edit profile</a></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </div>
                <div class="search right">
                    <i class="fa fa-search"></i><input type="text" placeholder=" " />
                    <div class="close-for-small"><i class="fa fa-times"></i></div>
                </div>
                <!-- <div class="edit right">
                    <a href=""><i class="fa fa-pencil-square-o"></i><span>Customize</span></a>
                </div> -->
                <div class="search-overlay"></div>
            </header>
            <!-- END USER -->

            <hr />

            <!-- MAIN SECTION -->
            <section>
                <div class="main-top">
                    <h2 class="left">My Shouts</h2>
                    <a href="#" class="left red-bg red-button"><i class="fa fa-plus"></i><span>Create a Shout</span></a>
                    <!-- Quick-faq -->   
                    <p class="quick-faq has-tooltip " title="A shout is a message you send through your supporters">What is a shout?</p>
                    <!-- End Quick-faq -->

                    <div class="sort right">
                        <p>Showing:</p>
                        <div class="left dropdown">
                            <div class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                                <div class="current">
                                    <span>Facebook</span><i class="fa fa-caret-down right"></i>
                                </div>
                            </div>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                <li>Facebook</li>
                                <li>Twitter</li>
                            </ul>
                        </div>
                    </div>

                </div>


                    
               
                <article class="shout white-box">
                    <div class="shout-head"><span class="right">24/10/13</span><h6 class="draft-tag">Draft</h6><h3>Shout 1</h3></div>
                    <p>&ldquo; Los Osos Polares corren peligro m&aacute;s que nunca, no perdamos tiempo. Yo ya firm&eacute; esta petici&oacute;n online y es mi granito de arena: <a href="">bit.ly/930485</a>. &rdquo;</p>
                    <div class="shout-foot">
                        <span class="left"><b>Total reach</b> 300 Spreaders</span>
                        <div class="right">
                            <a href=""><i class="fa fa-bar-chart-o"></i><span>Stats</span></a><!--
                            --><a href=""><i class="fa fa-pencil-square-o"></i><span>Edit</span></a><!--
                            --><a href=""><i class="fa fa-trash-o"></i><span>Delete</span></a><!--
                            --><button><i class="fa fa-bullhorn"></i><span>Shout</span></button>
                        </div>
                    </div>
                </article>
               
                <article class="shout white-box">
                    <div class="shout-head"><span class="right">24/10/13</span><h3>Shout 1</h3></div>
                    <p>&ldquo; Los Osos Polares corren peligro m&aacute;s que nunca, no perdamos tiempo. Yo ya firm&eacute; esta petici&oacute;n online y es mi granito de arena: <a href="">bit.ly/930485</a>. &rdquo;</p>
                    <div class="shout-foot">
                        <span class="left"><b>Total reach</b> 300 Spreaders</span>
                        <div class="right">
                            <a href=""><i class="fa fa-bar-chart-o"></i><span>Stats</span></a><!--
                            --><a href=""><i class="fa fa-pencil-square-o"></i><span>Edit</span></a><!--
                            --><a href=""><i class="fa fa-trash-o"></i><span>Delete</span></a><!--
                            --><button><i class="fa fa-bullhorn"></i><span>Shout</span></button>
                        </div>
                    </div>
                </article>
                
                <article class="shout white-box">
                    <div class="shout-head"><span class="right">24/10/13</span><h3>Shout 1</h3></div>
                    <p>&ldquo; Los Osos Polares corren peligro m&aacute;s que nunca, no perdamos tiempo. Yo ya firm&eacute; esta petici&oacute;n online y es mi granito de arena: <a href="">bit.ly/930485</a>. &rdquo;</p>
                    <div class="shout-foot">
                        <span class="left"><b>Total reach</b> 300 Spreaders</span>
                        <div class="right">
                            <a href=""><i class="fa fa-bar-chart-o"></i><span>Stats</span></a><!--
                            --><a href=""><i class="fa fa-pencil-square-o"></i><span>Edit</span></a><!--
                            --><a href=""><i class="fa fa-trash-o"></i><span>Delete</span></a><!--
                            --><button><i class="fa fa-bullhorn"></i><span>Shout</span></button>
                        </div>
                    </div>
                </article>
                
                <nav>
                    <button class="left"><i class="fa fa-long-arrow-left"></i><span>Older</span></button>
                    <button class="right"><span>Newer</span><i class="fa fa-long-arrow-right"></i></button>
                </nav>
            </section>
            <!-- END MAIN SECTION -->

        </div>
        <div class="clearfix"></div>
        <!-- END WHITE BLOCK -->
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
        <script type="text/javascript">
            

            $('.dropdown-toggle').dropdown();

            $('.search input').focus(function() {
                $('.search .fa-search').hide();
                if ($(window).width() < 480) {
                    $('.search-overlay').show();
                    $('.search').css('position', 'static');
                    $('.close-for-small').fadeIn();
                }
            });
            $('.search input').focusout(function() {
                $('.search .fa-search').css('display', 'inline');
                $('.search-overlay').hide();
                $('.search').css('position', 'relative');
                $('.close-for-small').hide();
            });
            var sidebarState = 'closed';
            $('.open-sidebar').click(function() {
                if (sidebarState == 'closed') {
                    $('aside').addClass('open');
                    $('.main-content').addClass('push');
                    sidebarState = 'open';
                } else {
                    $('aside').removeClass('open');
                    $('.main-content').removeClass('push');
                    sidebarState = 'closed';
                }
            });
        </script>
        <!-- //Tooltip -->
            <script>
        $(document).ready(function() {
            $('.has-tooltip').tooltipster();
        });
    </script>
            <!-- //End Tooltip -->
    </body>
</html>